<script setup>
import {  onMounted,ref } from 'vue'
import Page from '@/components/Page.vue'

const prop = defineProps({
    LineData:Array,
    fangwenNum:Array
})

const timer = prop.LineData.map((e) => e.id)
const count1 = prop.LineData.map((e) => e.pv)
const count2 = prop.LineData.map((e) => e.uip)

const line_chart= ref()
onMounted(async()=>{
    const lineDom = await line_chart.value
    // eslint-disable-next-line no-undef
    const myChart1 = echarts.init(lineDom)
    const option1 = {
        grid: {
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis',
        },
        legend: {

        },
        xAxis: {
            boundaryGap: false,
            type: 'category',
            data: timer,
            axisLabel: {
                color: "rgb(197,199,206)",
                fontSize: "12"
            },
            //  x轴样式不显示
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(197,199,206)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: "rgb(197,199,206)",
                fontSize: "12"
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show:false
            },
            axisTick: {
                show: false
            },
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '访问人数',
                symbol: 'none',//不要圆点
                data: count1,
                type: 'line',
                smooth: true
            },
            {
                name: '访问IP数',
                symbol: 'none',//不要圆点
                data: count2,
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart1.setOption(option1)
})
</script>

<template>
    <div class="Line">
        <Page title="访问曲线">
            <template #default>
                <div class="line_body">
                    <div class="left">
                        <ul>
                            <li>
                                <p>访问次数</p>{{ prop.fangwenNum.pv }}
                            </li>
                            <li>
                                <p>IP数</p>{{ prop.fangwenNum.uip }}
                            </li>
                        </ul>
                    </div>
                    <div ref="line_chart" class="line_chart" style="width: 70%;height: 380px;"></div>
                </div>
            </template>
        </Page>
    </div>
</template>

<style lang="scss" scoped>
.line_body{
    height: 380px;
    display: flex;
    padding-top: 20px;
    .left{
        width: 30%;
        li{
            line-height: 40px;
            display: flex;
            p{
                font-weight: 600;
                font-size: 14px;
                display: block;
                width: 80px;
                color: rgb(52, 100, 224);
            }
        }
    }

}
</style>